<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: HeAo
 * @LastEditTime: 2021-11-26 17:49:52
-->
<template>
  <div class="home">
     <img
            src="../assets/12.png"
            alt="图片丢失"
            width="1850px"
            height="200px"
          />
      <div class="sy">
         <a href="http://rsc.hhtc.edu.cn/index.htm" target="_blank">首页</a>
       &gt; <a href="http://rsc.hhtc.edu.cn/bmgk.htm" title="学院概况" target="_blank">部门概况</a>
       &gt; <a href="http://rsc.hhtc.edu.cn/rcyj.htm" title="学院概况" target="_blank">机构设置</a>
       &gt; <a href="http://rsc.hhtc.edu.cn/rcyj.htm" title="学院概况" target="_blank">人才引进</a>
       &gt; <a href="http://rsc.hhtc.edu.cn/rsdp.htm" title="学院概况" target="_blank">人事调配</a>
       &gt; <a href="http://rsc.hhtc.edu.cn/gzfl.htm" title="学院概况" target="_blank">工资福利</a>
       &gt; <a href="http://rsc.hhtc.edu.cn/zcpp.htm" title="学院概况" target="_blank">职称评聘</a>
       &gt; <a href="http://rsc.hhtc.edu.cn/zczd.htm" title="学院概况" target="_blank">政策制度</a>
       &gt; <a href="http://rsc.hhtc.edu.cn/fwzn.htm" title="学院概况" target="_blank">服务指南</a>
      </div>
    <!-- 头部区域 -->
    <div class="header">
      <div class="containor">
        <div class="name"></div>
        <ul class="category">
        </ul>
      </div>
    </div>
    <!-- 轮播图区域 -->
    <div class="swipper">
      <el-carousel height="470px">
        <el-carousel-item v-for="(item, index) in carousel" :key="index">
          <img :src="item.url" alt="图片丢失" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 内容区域 -->
    <div class="content">
     <li class="nLi">
                   
                    <div class="subnav">
                       <h1>通知公告 </h1>
                        <ul>
                            <li><a href="http://rsc.hhtc.edu.cn/info/1021/1877.htm" target="_blank">关于开展2021年度专业技术职称认定工作的通知</a></li>
                            <li><a href="http://rsc.hhtc.edu.cn/info/1021/1875.htm" target="_blank">关于开展怀化学院2021年度专业技术岗位晋级工作的通知</a></li>
                            <li><a href="http://rsc.hhtc.edu.cn/info/1021/1874.htm" target="_blank">关于做好我校2021年度高等学校教师系列专业技术职称申报与评审工作的通知</a></li>
                            <li><a href="http://rsc.hhtc.edu.cn/info/1021/1870.htm" target="_blank">怀化学院2021年度高等学校教师系列专业技术职称申报与评审工作的预通知 </a></li>
                            <li><a href="http://rsc.hhtc.edu.cn/info/1021/1867.htm" target="_blank">怀化学院2021年度高校教师系列专业技术职务评审职数情况公示 </a></li>
                            <li><a href="http://rsc.hhtc.edu.cn/info/1021/1843.htm" target="_blank">怀化学院关于2021年度省政府特殊津贴人员申报的通知</a></li>
                        </ul>
                    </div>
                    
     </li>
                <div class="rc">
                   <h1>人才引进 </h1>                                             
                        <li>
                                <span style="border: 1px solid #ccc;">11-02</span>
                                <i>521</i>
                                <div class="clear"></div>
                                <a href="http://rsc.hhtc.edu.cn/info/1004/1317.htm" title="         优秀学院优秀人才引进方法">优秀学院优秀人才引进方法</a>
                        </li>
                            <li ><a href="http://rsc.hhtc.edu.cn/info/1004/1316.htm" title="        2019年怀化学院拟录用人员">2019年怀化学院拟录用人员</a>
                            </li>
                            <a href="http://rsc.hhtc.edu.cn/info/1004/1315.htm" title="             怀化学院2019年非事业编制">怀化学院2019年非事业编制（三</a>
                            <li><a href="http://rsc.hhtc.edu.cn/info/1004/1314.htm" title="         怀化学院2019年专任教师公">怀化学院2019年专任教师公</a>
                            </li>
                            <li><a href="http://rsc.hhtc.edu.cn/info/1004/1313.htm" title="         怀化学院2019年公开招聘非">怀化学院2019年公开招聘非</a>
                            </li>
                </div>
                <div class="right">
                      <h1>人事政策</h1>
                      <li><a href="http://rsc.hhtc.edu.cn/info/1011/1679.htm" target="_blank">《怀化学院非事业编制聘用人员管理办法（试行）》 </a></li>
                      <li><a href="http://rsc.hhtc.edu.cn/info/1011/1678.htm" target="_blank">《怀化学院教职工处分暂行规定(试行)》 </a></li>
                      <li><a href="http://rsc.hhtc.edu.cn/info/1011/1677.htm" target="_blank">《怀化学院工作人员奖励暂行规定（试行）》 </a></li>
                      <li><a href="http://rsc.hhtc.edu.cn/info/1011/1676.htm" target="_blank">《怀化学院教职工年度考核办法（试行）》  </a></li>
                      <li><a href="http://rsc.hhtc.edu.cn/info/1010/1674.htm" target="_blank">转发《关于进一步规范事业单位岗位设置工作的通知》  </a></li>
                    </div>
                            
    </div>
        </div>


 
 
</template>

<script>
// 导入请求工具
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
      categories: [],
      carousel: [],
      projects: [],
      stuElegent: [],
    };
  },
  methods: {
    // 查询所有栏目信息
    findAllCategories() {
      // 使用axios封装的get方法，发送ajax请求，拿到所有的栏目数据
      get("/index/category/findAll").then((res) => {
        // 将后台接口响应的数据，设置到组件的数据模型中
        this.categories = res.data;
      });
    },
    // 查询所有轮播图
    findAllCarousel() {
      get("/index/carousel/findAll").then((res) => {
        // 将后台响应的轮播图数据，设置到组件的数据模型中
        this.carousel = res.data;
      });
    },
    // 查询所有游学项目信息
    findAllProjects() {
      get("/index/project/pageQuery", { page: 1, pageSize: 100 }).then(
        (res) => {
          this.projects = res.data.list;
        }
      );
    },
    // 查询所有学生风采信息
    findAllStudentElegents() {
      get("/index/article/pageQuery", { page: 1, pageSize: 100 }).then(
        (res) => {
          this.stuElegent = res.data.list;
        }
      );
    },
    // 游学项目卡片点击事件
    cardClickHander(id) {
      // 点击项目卡片，跳转至目标页面
      // 通过query属性携带参数，参数会以查询字符串的形式，拼接到url地址栏后面
      this.$router.push({ path: "/project", query: { id } });
    },
  },
  // vue组件的生命周期钩子函数
  created() {
    // 调用查询所有栏目信息的方法
    this.findAllCategories();
    // 调用查询所有轮播图的方法
    this.findAllCarousel();
    // 调用查询所有项目信息的方法
    this.findAllProjects();
    // 调用查询所有学生风采信息的方法
    this.findAllStudentElegents();
  },
};
</script>

<style scoped>
.header {
  /* display: flex; */
  height: 80px;
  font-family: "微软雅黑";
  box-shadow: 0 0 5px 5px rgba(153, 153, 153, 0.329);
}
/* 为因为子元素浮动产生高度塌陷的父元素清除浮动 => 使用伪元素来清除浮动 */
.containor::after {
  display: block;
  clear: both;
  content: "";
}
.name {
  float: left;
  font-size: 22px;
  font-weight: bold;
  color: #555;
  height: 80px;
  line-height: 80px;
  cursor: pointer;
}
.category {
  float: left;
  display: flex;
  margin: 0;
  padding: 0 1em;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  color: #666;
}
.swipper{
  height: 400px;
   width: 1850px;
}
.eleCardTitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.category > li {
  padding: 0 16px;
  cursor: pointer;
}
.telephone {
  float: right;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
}
.telephone > img {
  position: relative;
  top: 5px;
  margin-right: 10px;
}
.content {
  
  padding: 0 100px;
  margin-top: 50px;
}
.right{
  float: left;
}
.rc{
  float: left;
}
.subnav{
  float: left;
}
.projectCard {
  height: 200px;
  line-height: 200px;
  border-radius: 5px;
  display: flex;
  box-shadow: 0 0 5px 5px rgba(202, 200, 200, 0.178);
  margin-bottom: 20px;
  cursor: pointer;
}
.cardRight {
  padding-left: 1em;
  font-family: "微软雅黑";
}
.cardTitle {
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: #666;
  font-weight: bold;
}
.cardDatetime {
  height: 50px;
  line-height: 50px;
}
.cardDes {
  height: 35px;
  line-height: 35px;
}
.studentElegent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* justify-content: space-between; */
}
.stuEleCard {
  flex-basis: 24%;
  width: 250px;
  cursor: pointer;
  margin-bottom: 10px;
  margin-right: 10px;
}
.stuEleCard:hover {
  box-shadow: 0 0 5px 5px #d4d3d386;
}
.stuEleCard img {
  width: 100%;
  border-radius: 5px;
}
.cardText {
  padding: 1em;
  font-family: "微软雅黑";
  line-height: 40px;
  background-color: #ededed8c;
  height: 200px;
}
.content a{
  text-decoration: none;
color: #000;
font-size: 18px;
}
.home .sy{
  font-size: 28px;
}
.home .sy a{
  font-size: 28px;
  text-decoration: none;
  color: #000;
}
</style>
